import React from "react"
import PropTypes from 'prop-types'

//在react中组件的代码复用是继承还是组合?——组合
//组合，在React组件化中，应用极其广泛。
/*
    组合的语法基础：props.children，render props(指的是React元素的自定义属性可以是JSX元素)


    如果要封装刚才看到的这种modal？
    一、如果我是用继承的思想，该怎么做
    class Modal extends React.component { } //基类
    class ConfirmModal extends Modal{}/子类
    
    class DeleteHodal extends Modal {}//子类
    
    二、使用组合的思想来封装这种modal
    props-types
    */
   
const Modal=props=>{
    let{
        size,//用来控制弹框大小
        visiable,//用来控制是否显示
        children,// 弹框body体中的内容，ReactNode
        onClose,//用来关闭弹窗
        title,//用来控制弹窗名字
        type,//用来决定弹窗的类型
        header,//是否显示头部
    }=props
    //定义一个生成btn的方法
    const changeBtn=()=>{
        const confirmBtn = <button key='1' onClick={onClose} className={`confirm btn-${size}`}>确认</button>
        const cancelBtn = <button key='2' onClick={onClose} className={`cancel btn-${size}`}>取消</button>
        const deleteBtn = <button key='3' onClick={onClose} className={`delete btn-${size}`}>删除</button>
        let arr=[]
        switch((type||'confirm')){
            case 'confirm':
                arr = [confirmBtn]
            break
            case 'cancel':
                arr = [cancelBtn]
            break
            case 'delete':
                arr = [deleteBtn]
            break
        }
        return [...arr,cancelBtn]

    }
    return (
        <div className='qf-modal-layer' style={{display:visiable?'block':'none'}}>
            <div className={`qf-modal qf-modal-${size||"default"}`}>
                {
                    size!='small'&&
                    <div className='header'>
                        <span className='title'>{title||"确认"}</span>
                        <span className='close' onClick={onClose}>X</span>
                    </div>
                }
                <div className='body'>
                    {children}
                </div>
                <div className='footer'>
                    {changeBtn()}
                </div>
            </div>
        </div>
    )
}
//通过第三方来判断props
Modal.propTypes={
    size:PropTypes.oneOf(['small','middle','default']),
    visiable:PropTypes.bool,
    onClose:PropTypes.func,
    title:PropTypes.oneOfType([PropTypes.string,PropTypes.node]),
    type: PropTypes.string,
}

export default class TestCombine extends React.Component{
    constructor(props){
        super(props)
        this.state={
            show:false
        }
    }
    // 【功能】：点击按钮弹出弹框
    open(){
        this.setState(s=>({show:!s.show}))
        // console.log(this.state.visiable);
    }
    // 【功能】：点击X关闭弹框
    close(){
        this.setState(s => ({ show: false }))
    }
    render(){
        let{
            show
        }=this.state
        return (
            <div>
                <button onClick={()=>this.open()}>显示弹框</button>
                <Modal
                    visiable={show}
                    title='警告'
                    onClose={()=>this.close()}
                    header
                >
                    <div>
                        <h5>注意以下操作有风险！</h5>
                    </div>
                </Modal>
            </div>
        )
    }
}